<template>
  <div>
    <el-form :model="formInline" ref="formInline">
      <el-form-item prop="account" label="用户名">
        <el-input
          v-model="formInline.account"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码 ">
        <el-input
          v-model="formInline.password"
          placeholder="请输入密码·"
        ></el-input>
      </el-form-item>
      <el-form-item prop="mobile" label="手机号">
        <el-input
          v-model="formInline.mobile"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="code" label="验证码">
        <el-input
          v-model="formInline.code"
          placeholder="请输入验证码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="btnmodel">获取验证码</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">登录</el-button>
      </el-form-item>
    </el-form>

    <!-- <el-form
      :model="dynamicValidateForm"
      ref="dynamicValidateForm"
      label-width="100px"
      class="demo-dynamic"
    >
      <el-form-item
        prop="account"
        label="用户名">
        <el-input
          v-model="dynamicValidateForm.account"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        prop="email"
        label="手机号"
        :rules="[
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的手机号',
            trigger: ['blur', 'change'],
          },
        ]"
      >
        <el-input v-model="dynamicValidateForm.email"></el-input>
      </el-form-item>
      <el-form-item
        v-for="(domain, index) in dynamicValidateForm.domains"
        label="验证码"
        :key="domain.key"
        :prop="'domains.' + index + '.value'"
        :rules="{
          required: true,
          message: '手机号不能为空',
          trigger: 'blur',
        }"
      >
        <el-input v-model="domain.value"></el-input
        ><el-button @click="btnmodel">获取验证码</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">登录</el-button>
      </el-form-item>
    </el-form> -->
  </div>
</template>

<script>
import Axios from "axios";
export default {
  name: "Home",
  data() {
    return {
      formInline:{
        mobile: "",
        code: "",
        account: "",
        password:''
      }
    };
  },
  // 定义规则
  loginRules: {
    // 账号的规则
    mobile: [
      { required: true, message: "请输入账号", trigger: "blur" },
      {
        min: 2,
        max: 16,
        message: "手机号为11位",
        tirgger: "blur",
      },
    ],
  },
  methods: {
    // 获取验证码
    btnmodel() {
      Axios.post("/verification/",{mobile:this.formInline.mobile})
        .then((resp) => {
          console.log(resp.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 登录
    submitForm() {
      var data = {
        mobile: this.formInline.mobile,
        password: this.formInline.password,
        code: this.formInline.code,
        account: this.formInline.account,
      };
      Axios.post("/login/", data)
        .then((resp) => {
          console.log(resp.data);
          if (resp.data.code == "200") {
            // 把token  写入缓存
            localStorage.setItem("token", resp.data.token);
            // 把用户id  写入缓存
            localStorage.setItem("userid", resp.data.user);
            if (resp.data.code == "200") {
              this.$router.push("/one_home");
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>


<style>
</style>